import React from 'react';
import { connect } from 'umi';
import BasicConfig from './BasicConfig';

class RightWrapper extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    const rect: any = {
      x: 0,
      y: 0,
      w: 0,
      h: 0,
    };
    //console.log(this.props)
    if (this.props.component.active) {
      rect.x = this.props.component.active.position.x;
      rect.y = this.props.component.active.position.y;
      rect.w = this.props.component.active.position.w;
      rect.h = this.props.component.active.position.h;
    }

    this.state = {
      basic: [
        { name: 'x', value: rect.x },
        { name: 'y', value: rect.y },
        { name: 'w', value: rect.w },
        { name: 'h', value: rect.h },
      ],
    };
  }
  static getDerivedStateFromProps(props: any, state: any) {
    console.log(props, state);
    if (props.component.active) {
      return {
        basic: [
          { name: 'x', value: props.component.active.position.x },
          { name: 'y', value: props.component.active.position.y },
          { name: 'w', value: props.component.active.position.w },
          { name: 'h', value: props.component.active.position.h },
        ],
      };
    }
    return null;
  }
  render() {
    return (
      <>
        <div>基础配置</div>
        <BasicConfig fields={this.state.basic} onChange={this.onBasicChange} />
      </>
    );
  }
  onBasicChange(data: any) {}
}

export default connect(({ component }: any) => ({
  component,
}))(RightWrapper);
